<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浪漫表白</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        love: {
                            50: '#FFEBEE',
                            100: '#FFCDD2',
                            200: '#EF9A9A',
                            300: '#E57373',
                            400: '#EF5350',
                            500: '#F44336',
                            600: '#E53935',
                            700: '#D32F2F',
                            800: '#C62828',
                            900: '#B71C1C',
                        },
                    },
                    fontFamily: {
                        romantic: ['"Ma Shan Zheng"', '"ZCOOL QingKe HuangYou"', 'sans-serif'],
                    },
                    animation: {
                        'float': 'float 3s ease-in-out infinite',
                        'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite',
                        'heartbeat': 'heartbeat 1.5s ease-in-out infinite',
                    },
                    keyframes: {
                        float: {
                            '0%, 100%': { transform: 'translateY(0)' },
                            '50%': { transform: 'translateY(-10px)' },
                        },
                        heartbeat: {
                            '0%': { transform: 'scale(1)' },
                            '14%': { transform: 'scale(1.1)' },
                            '28%': { transform: 'scale(1)' },
                            '42%': { transform: 'scale(1.1)' },
                            '70%': { transform: 'scale(1)' },
                        }
                    }
                },
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .text-shadow {
                text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
            }
            .text-shadow-lg {
                text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.5);
            }
            .heart {
                position: relative;
                width: 50px;
                height: 45px;
                animation: heartbeat 1.5s infinite;
            }
            .heart:before,
            .heart:after {
                content: "";
                position: absolute;
                top: 0;
                width: 25px;
                height: 40px;
                border-radius: 25px 25px 0 0;
                background: theme('colors.love.600');
            }
            .heart:before {
                left: 0;
                transform: rotate(-45deg);
                transform-origin: 100% 100%;
            }
            .heart:after {
                left: 25px;
                transform: rotate(45deg);
                transform-origin: 0 100%;
            }
            .particle {
                position: fixed;
                pointer-events: none;
                z-index: 9999;
            }
            .bg-blur {
                backdrop-filter: blur(8px);
            }
            .custom-scrollbar::-webkit-scrollbar {
                width: 6px;
            }
            .custom-scrollbar::-webkit-scrollbar-track {
                background: rgba(255, 255, 255, 0.1);
            }
            .custom-scrollbar::-webkit-scrollbar-thumb {
                background: theme('colors.love.400');
                border-radius: 3px;
            }
        }
        
        /* 心跳动画 */
        @keyframes heartbeat {
            0% { transform: scale(1); }
            14% { transform: scale(1.15); }
            28% { transform: scale(1); }
            42% { transform: scale(1.15); }
            70% { transform: scale(1); }
        }
        
        .heartbeat-animation {
            animation: heartbeat 1.5s ease-in-out infinite;
        }
        
        /* 记忆卡片样式 */
        #memoryCardsContainer {
            width: 100%;
        }
        
        .memory-card {
            min-width: 100%;
            padding: 0 2rem;
            box-sizing: border-box;
        }
        
        .memory-content {
            background: linear-gradient(135deg, #ff4d79 0%, #ff91a8 100%);
            border-radius: 20px;
            padding: 3rem;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
            text-align: center;
            min-height: 300px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        
        .memory-date {
            font-size: 1.2rem;
            opacity: 0.9;
            margin-bottom: 1rem;
        }
        
        .memory-text {
            font-size: 1.8rem;
            line-height: 1.6;
            margin-bottom: 1.5rem;
        }
        
        /* 淡入动画 */
        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .fade-in {
            animation: fadeIn 0.8s ease-out forwards;
        }
        
        /* 倒计时动画 */
        @keyframes countdownNumber {
            0% { transform: scale(1); opacity: 1; }
            50% { transform: scale(1.2); opacity: 0.8; }
            100% { transform: scale(0); opacity: 0; }
        }
        
        .countdown-number {
            animation: countdownNumber 1s ease-out forwards;
        }
        
        /* 爱情颜色变量 */
        :root {
            --color-love-100: #fff5f7;
            --color-love-200: #ffe0e6;
            --color-love-300: #ffccd5;
            --color-love-400: #ffb3c1;
            --color-love-500: #ff8fab;
            --color-love-600: #ff6b95;
            --color-love-700: #ff4d79;
            --color-love-800: #e63965;
            --color-love-900: #cc1a4a;
            --color-love-950: #800020;
        }
    </style>
    <!-- 引入中文字体 -->
    <link href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&family=ZCOOL+QingKe+HuangYou&display=swap" rel="stylesheet">
</head>
<body class="min-h-screen bg-gradient-to-br from-love-900 via-love-700 to-love-500 text-white overflow-hidden custom-scrollbar">
    <!-- 音频元素 -->
    <audio id="backgroundMusic" preload="auto">
        您的浏览器不支持音频元素。
    </audio>
    <audio id="heartSound" preload="auto">
        <source src="https://assets.mixkit.co/sfx/preview/mixkit-heartbeat-1606.mp3" type="audio/mpeg">
        <source src="https://www.soundjay.com/mechanical/helicopter-1.mp3" type="audio/mpeg">
    </audio>
    
    <!-- 简约音频控制开关 -->
    <div class="fixed top-4 left-4 z-30">
        <button id="toggleMusic" class="text-white bg-transparent hover:bg-black hover:bg-opacity-20 rounded-full p-2 transition-all duration-300 focus:outline-none">
            <i class="fa fa-volume-up"></i>
        </button>
    </div>
    
    <!-- 音乐自定义面板 -->
    <div id="musicCustomizationPanel" class="fixed top-16 left-4 bg-black bg-opacity-70 rounded-lg p-3 z-30 hidden">
        <h3 class="text-white text-sm mb-2">音乐配置</h3>
        <!-- 配置说明 -->
        <div class="text-white text-xs mb-2">
            音乐通过 <strong>music文件夹</strong> 自动配置<br>
            请在music文件夹中添加或删除音频文件
        </div>
        <!-- 当前音乐列表 -->
        <div id="musicList" class="text-white text-xs max-h-32 overflow-y-auto mt-2 mb-2">
            音乐列表: 加载中...
        </div>
        <!-- 当前播放信息 -->
        <div id="currentMusicInfo" class="text-white text-xs mt-2">当前播放: 加载中...</div>
        <!-- 刷新配置按钮 -->
        <button id="refreshConfig" class="mt-2 bg-love-500 text-white text-xs px-3 py-1 rounded">刷新音乐列表</button>
    </div>
    
    <!-- 音乐自定义按钮 -->
    <div class="fixed top-4 left-16 z-30">
        <button id="customizeMusicBtn" class="text-white bg-transparent hover:bg-black hover:bg-opacity-20 rounded-full p-2 transition-all duration-300 focus:outline-none">
            <i class="fa fa-music"></i>
        </button>
    </div>

    <!-- 初始界面 -->
    <div id="startScreen" class="fixed inset-0 flex flex-col items-center justify-center z-50 bg-black bg-opacity-80">
        <div class="text-center px-4 max-w-2xl animate-float">
            <h1 class="text-[clamp(2.5rem,8vw,5rem)] font-romantic mb-6 text-shadow-lg animate-pulse-slow">亲爱的...</h1>
            <p class="text-[clamp(1.2rem,4vw,1.8rem)] font-romantic mb-10 text-shadow">点击开始，给你一个小惊喜</p>
            <button id="startBtn" class="bg-love-500 hover:bg-love-600 text-white font-bold py-4 px-8 rounded-full text-xl transition-all duration-300 transform hover:scale-110 focus:outline-none focus:ring-4 focus:ring-love-300 shadow-lg">
                <i class="fa fa-heart mr-2"></i>开始
            </button>
        </div>
    </div>

    <!-- 主内容区 -->
    <div id="mainContent" class="fixed inset-0 flex flex-col items-center justify-center p-4 opacity-0 transition-opacity duration-1000 z-40">
        <!-- 头部文字 -->
        <div class="text-center mb-12">
            <h1 class="text-[clamp(2rem,6vw,3.5rem)] font-romantic mb-4 text-shadow-lg">给我最爱的人</h1>
            <div class="flex justify-center items-center space-x-4">
                <div class="heart"></div>
                <p class="text-[clamp(1.2rem,3vw,1.8rem)] font-romantic text-shadow">爱你每一天</p>
                <div class="heart"></div>
            </div>
        </div>

        <!-- 表白卡片 -->
        <div id="loveCard" class="bg-white bg-opacity-10 bg-blur rounded-2xl p-8 max-w-2xl w-full shadow-2xl transform transition-all duration-700 hover:scale-105 cursor-pointer">
            <div id="cardContent" class="min-h-[300px] flex flex-col justify-center">
                <p class="text-[clamp(1.3rem,4vw,1.8rem)] font-romantic leading-relaxed mb-6 opacity-0">
                    从遇见你的那一刻起，我的生命便有了不同的意义。
                </p>
                <p class="text-[clamp(1.3rem,4vw,1.8rem)] font-romantic leading-relaxed mb-6 opacity-0">
                    你的笑容如阳光般温暖，你的声音如音乐般悦耳。
                </p>
                <p class="text-[clamp(1.3rem,4vw,1.8rem)] font-romantic leading-relaxed mb-6 opacity-0">
                    每一次与你相处的时光，都是我最珍贵的回忆。
                </p>
                <p class="text-[clamp(1.3rem,4vw,1.8rem)] font-romantic leading-relaxed opacity-0">
                    我想告诉你，我喜欢你，不仅仅是今天，而是每一天。
                </p>
            </div>
        </div>

        <!-- 互动区 -->
        <div id="interactionArea" class="mt-12 flex space-x-6 opacity-0 transition-opacity duration-500 delay-1200">
            <button id="yesBtn" class="bg-love-500 hover:bg-love-600 text-white font-bold py-3 px-8 rounded-full text-xl transition-all duration-300 transform hover:scale-110 focus:outline-none focus:ring-4 focus:ring-love-300 shadow-lg">
                <i class="fa fa-heart mr-2"></i>我也爱你
            </button>
            <button id="noBtn" class="bg-gray-500 hover:bg-gray-600 text-white font-bold py-3 px-8 rounded-full text-xl transition-all duration-300 transform hover:scale-110 focus:outline-none focus:ring-4 focus:ring-gray-300 shadow-lg">
                <i class="fa fa-times mr-2"></i>再考虑一下
            </button>
        </div>

        <!-- 倒计时页面 -->
        <div id="countdownScreen" class="fixed inset-0 flex flex-col items-center justify-center bg-love-900 text-white z-40 opacity-0 pointer-events-none transition-all duration-1000">
            <h2 class="text-[clamp(2rem,6vw,4rem)] font-romantic mb-12">准备好了吗？</h2>
            <div id="countdown" class="text-[clamp(5rem,20vw,15rem)] font-bold font-romantic text-love-300">3</div>
        </div>

        <!-- 爱情测试界面 -->
        <div id="loveTestScreen" class="fixed inset-0 flex items-center justify-center bg-love-900 text-white z-30 opacity-0 pointer-events-none transition-all duration-1000">
            <div id="loveTestContainer" class="love-test-container">
                <h2 class="fade-in-text">爱情契合度测试</h2>
                <div id="loveTestQuestions" class="questions-list"></div>
                <div id="loveTestResult" class="test-result"></div>
                <button id="loveTestContinue" class="btn love-test-continue">继续我们的故事</button>
            </div>
        </div>
        
        <!-- 心跳预加载页面 -->
        <div id="heartbeatScreen" class="fixed inset-0 flex flex-col items-center justify-center bg-love-950 text-white z-30 opacity-0 pointer-events-none transition-all duration-1000">
            <div id="heartbeatIcon" class="text-[clamp(8rem,25vw,20rem)] text-love-500 transition-all duration-300 transform scale-100">
                <i class="fa fa-heart"></i>
            </div>
        </div>

        <!-- 爱情记忆卡片轮播 -->
        <div id="memoryCards" class="fixed inset-0 flex items-center justify-center z-30 opacity-0 pointer-events-none transition-all duration-1000 bg-black bg-opacity-80">
            <div class="relative w-full max-w-4xl">
                <div id="memoryCardsContainer" class="flex transition-transform duration-500 ease-out overflow-hidden">
                    <!-- 记忆卡片将通过JS动态添加 -->
                </div>
                <button id="prevMemory" class="absolute left-2 top-1/2 transform -translate-y-1/2 bg-white bg-opacity-30 hover:bg-opacity-50 text-white w-12 h-12 rounded-full flex items-center justify-center transition-all">
                    <i class="fa fa-chevron-left text-xl"></i>
                </button>
                <button id="nextMemory" class="absolute right-2 top-1/2 transform -translate-y-1/2 bg-white bg-opacity-30 hover:bg-opacity-50 text-white w-12 h-12 rounded-full flex items-center justify-center transition-all">
                    <i class="fa fa-chevron-right text-xl"></i>
                </button>
                <button id="closeMemories" class="absolute top-2 right-2 bg-white bg-opacity-30 hover:bg-opacity-50 text-white w-8 h-8 rounded-full flex items-center justify-center transition-all">
                    <i class="fa fa-times"></i>
                </button>
</div>
            </div>
        </div>

        <!-- 爱心雨区域 -->
        <div id="heartsRain" class="fixed inset-0 pointer-events-none z-20"></div>

        <!-- 结局弹窗 -->
        <div id="endingModal" class="fixed inset-0 flex items-center justify-center bg-black bg-opacity-80 z-50 opacity-0 pointer-events-none transition-opacity duration-500">
            <div class="bg-love-50 rounded-2xl p-8 max-w-lg w-full text-love-900 shadow-2xl transform transition-transform duration-500 scale-95">
                <h2 class="text-[clamp(1.8rem,5vw,3rem)] font-romantic mb-6 text-center">太棒了！</h2>
                <p id="endingText" class="text-[clamp(1.2rem,3vw,1.5rem)] font-romantic leading-relaxed mb-8 text-center">
                    谢谢你接受我的心意，我会用一生去爱你、珍惜你。
                </p>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 获取DOM元素
            const startScreen = document.getElementById('startScreen');
            const startBtn = document.getElementById('startBtn');
            const mainContent = document.getElementById('mainContent');
            const loveCard = document.getElementById('loveCard');
            const cardContent = document.getElementById('cardContent');
            const interactionArea = document.getElementById('interactionArea');
            const yesBtn = document.getElementById('yesBtn');
            const noBtn = document.getElementById('noBtn');
            const endingModal = document.getElementById('endingModal');
            const endingText = document.getElementById('endingText');
            const restartBtn = document.getElementById('restartBtn');
            const backgroundMusic = document.getElementById('backgroundMusic');
            const heartSound = document.getElementById('heartSound');
            let heartsRain = document.getElementById('heartsRain');
            const toggleMusicBtn = document.getElementById('toggleMusic');
            const customizeMusicBtn = document.getElementById('customizeMusicBtn');
            const musicCustomizationPanel = document.getElementById('musicCustomizationPanel');
            const refreshConfigBtn = document.getElementById('refreshConfig');
            const currentMusicInfo = document.getElementById('currentMusicInfo');
            const musicList = document.getElementById('musicList');
            
            // 新添加的交互元素
            const countdownScreen = document.getElementById('countdownScreen');
            const countdown = document.getElementById('countdown');
            const loveTestScreen = document.getElementById('loveTestScreen');
            const heartbeatScreen = document.getElementById('heartbeatScreen');
            const heartbeatIcon = document.getElementById('heartbeatIcon');
            const memoryCards = document.getElementById('memoryCards');
            const memoryCardsContainer = document.getElementById('memoryCardsContainer');
            const prevMemoryBtn = document.getElementById('prevMemory');
            const nextMemoryBtn = document.getElementById('nextMemory');
            const closeMemoriesBtn = document.getElementById('closeMemories');
            
            // 文字元素
            const paragraphs = cardContent.querySelectorAll('p');
            
            // 音乐相关变量
            let currentMusicIndex = 0;
            let musicFiles = [];
            let isMusicPlaying = false;
            
            // 记忆卡片数据
            const loveMemories = [
                {
                    date: '第一次相遇',
                    text: '第一次见到你的时候，仿佛时间都静止了，那一刻我就知道，你是特别的。'
                },
                {
                    date: '第一次约会',
                    text: '那天阳光很好，和你一起漫步在公园，是我人生中最美好的一天之一。'
                },
                {
                    date: '第一次牵手',
                    text: '当我们的手指第一次相触，我的心跳得那么快，仿佛要跳出胸膛。'
                },
                {
                    date: '第一次拥抱',
                    text: '你的拥抱温暖而有力，让我感到前所未有的安心和幸福。'
                },
                {
                    date: '第一次争吵',
                    text: '即使有了小争执，我也感谢它让我们更加了解彼此，更加珍惜对方。'
                },
                {
                    date: '无数个日常',
                    text: '那些看似平凡的日子，因为有你的陪伴而变得意义非凡。'
                },
                {
                    date: '生日惊喜',
                    text: '为你准备生日惊喜的那天，看到你开心的笑容，是我最幸福的时刻。'
                },
                {
                    date: '共同旅行',
                    text: '一起去旅行的日子，看遍沿途风景，却发现最美的风景是你。'
                },
                {
                    date: '雨中漫步',
                    text: '即使在雨中淋湿，只要和你在一起，也觉得是一种浪漫。'
                },
                {
                    date: '深夜谈心',
                    text: '那些深夜的长谈，让我们的心越来越靠近，越来越了解彼此。'
                },
                {
                    date: '相互支持',
                    text: '在我遇到困难时，你的支持和鼓励是我最大的力量源泉。'
                },
                {
                    date: '一起做饭',
                    text: '虽然手忙脚乱，但一起做饭的时光充满了欢声笑语。'
                },
                {
                    date: '看电影',
                    text: '靠在你肩上看电影，即使电影很无聊，也觉得很幸福。'
                },
                {
                    date: '未来的期许',
                    text: '我期待与你一起走过更多的日出日落，一起创造更多美好的回忆。'
                }
            ];
            
            let currentMemoryIndex = 0;
            
            // 如果heartsRain元素不存在，创建一个
            if (!heartsRain) {
                heartsRain = document.createElement('div');
                heartsRain.id = 'heartsRain';
                heartsRain.style.position = 'fixed';
                heartsRain.style.top = '0';
                heartsRain.style.left = '0';
                heartsRain.style.width = '100%';
                heartsRain.style.height = '100%';
                heartsRain.style.pointerEvents = 'none';
                heartsRain.style.zIndex = '9998';
                document.body.appendChild(heartsRain);
            }
            
            // 播放背景音乐的函数
            function playBackgroundMusic() {
                if (config && config.music) {
                    backgroundMusic.volume = config.music.volume || 0.5;
                } else {
                    backgroundMusic.volume = 0.5;
                }
                
                backgroundMusic.play().then(() => {
                    console.log('音乐播放成功');
                    isMusicPlaying = true;
                    toggleMusicBtn.innerHTML = '<i class="fa fa-volume-up"></i>';
                }).catch(e => {
                    console.log('自动播放被阻止，尝试用户交互后播放:', e);
                    // 即使失败也继续显示主内容
                });
            }
            
            // 初始化记忆卡片
            function initMemoryCards() {
                if (!memoryCardsContainer) return;
                
                // 清空容器
                memoryCardsContainer.innerHTML = '';
                
                // 创建记忆卡片
                loveMemories.forEach(memory => {
                    const card = document.createElement('div');
                    card.className = 'memory-card';
                    card.innerHTML = `
                        <div class="memory-content">
                            <div class="memory-date">${memory.date}</div>
                            <div class="memory-text">${memory.text}</div>
                        </div>
                    `;
                    memoryCardsContainer.appendChild(card);
                });
                
                // 设置容器宽度
                memoryCardsContainer.style.width = `${loveMemories.length * 100}%`;
            }
            
            // 显示记忆卡片轮播
            function showMemoryCards() {
                if (!memoryCards) return;
                
                // 显示记忆卡片区域
                memoryCards.style.opacity = '1';
                memoryCards.style.pointerEvents = 'auto';
                
                // 初始化第一张卡片
                updateMemoryPosition();
            }
            
            // 更新记忆卡片位置
            function updateMemoryPosition() {
                if (!memoryCardsContainer) return;
                
                const cardWidth = 100 / loveMemories.length;
                memoryCardsContainer.style.transform = `translateX(-${currentMemoryIndex * cardWidth}%)`;
                
                // 添加淡入动画
                const cards = memoryCardsContainer.querySelectorAll('.memory-card');
                setTimeout(() => {
                    cards.forEach((card, index) => {
                        if (index === currentMemoryIndex) {
                            card.querySelector('.memory-content').classList.add('fade-in');
                        } else {
                            card.querySelector('.memory-content').classList.remove('fade-in');
                        }
                    });
                }, 50);
            }
            
            // 显示倒计时
            function showCountdown(callback) {
                if (!countdownScreen || !countdown) return callback?.();
                
                // 显示倒计时屏幕
                countdownScreen.style.opacity = '1';
                countdownScreen.style.pointerEvents = 'auto';
                
                let count = 5; // 增加倒计时数字
                countdown.textContent = count;
                
                const countdownInterval = setInterval(() => {
                    count--;
                    
                    if (count > 0) {
                        // 添加上一个数字的动画
                        countdown.classList.add('countdown-number');
                        
                        // 短暂延迟后更新数字
                        setTimeout(() => {
                            countdown.textContent = count;
                            countdown.classList.remove('countdown-number');
                        }, 800); // 增加数字切换动画时间
                    } else {
                        clearInterval(countdownInterval);
                        
                        // 最后一个数字动画
                        countdown.classList.add('countdown-number');
                        
                        // 隐藏倒计时屏幕
                        setTimeout(() => {
                            countdownScreen.style.opacity = '0';
                            countdownScreen.style.pointerEvents = 'none';
                            
                            // 调用回调
                            callback?.();
                        }, 1500); // 增加最后一个数字的显示时间
                    }
                }, 2000); // 增加倒计时间隔，让每个数字显示更久
            }
            
            // 显示心跳动画
            function showHeartbeat(callback) {
                if (!heartbeatScreen || !heartbeatIcon) return callback?.();
                
                // 显示心跳屏幕
                heartbeatScreen.style.opacity = '1';
                heartbeatScreen.style.pointerEvents = 'auto';
                
                // 添加心跳动画
                heartbeatIcon.classList.add('heartbeat-animation');
                
                // 播放6次心跳后隐藏，让心跳更加持久
                let heartbeatCount = 0;
                const heartbeatInterval = setInterval(() => {
                    heartbeatCount++;
                    
                    if (heartbeatCount >= 6) {
                        clearInterval(heartbeatInterval);
                        
                        // 隐藏心跳屏幕
                        setTimeout(() => {
                            heartbeatScreen.style.opacity = '0';
                            heartbeatScreen.style.pointerEvents = 'none';
                            heartbeatIcon.classList.remove('heartbeat-animation');
                            
                            // 调用回调
                            callback?.();
                        }, 1000);
                    }
                }, 1800); // 增加心跳间隔，让动画更有节奏感
            }
            
            // 开始按钮点击事件
            startBtn.addEventListener('click', function() {
                console.log('开始按钮被点击，启动表白流程...');
                
                // 播放背景音乐
                playBackgroundMusic();
                
                // 隐藏开始界面
                startScreen.style.opacity = '0';
                startScreen.style.pointerEvents = 'none';
                
                // 立即显示主内容
                mainContent.style.opacity = '1';
                
                // 立即开始显示卡片内容，逐行出现
                // 确保每个段落默认是透明的
                paragraphs.forEach(para => {
                    para.style.opacity = '0';
                });
                
                // 逐行显示每个段落（仍保留逐行效果，但立即开始）
                paragraphs.forEach((para, index) => {
                    setTimeout(() => {
                        // 使用过渡效果让每行优雅地出现
                        para.style.transition = 'opacity 0.8s ease-in-out';
                        para.style.opacity = '1';
                    }, index * 600); // 每行间隔600毫秒，比之前稍快一些
                });
                
                // 延迟显示互动区域，确保所有文字都已显示
                setTimeout(() => {
                    interactionArea.style.transition = 'opacity 0.8s ease-in-out';
                    interactionArea.style.opacity = '1';
                }, paragraphs.length * 600 + 300);
            });
            
            // 记忆卡片导航事件
            prevMemoryBtn.addEventListener('click', function() {
                currentMemoryIndex = (currentMemoryIndex - 1 + loveMemories.length) % loveMemories.length;
                updateMemoryPosition();
            });
            
            nextMemoryBtn.addEventListener('click', function() {
                currentMemoryIndex = (currentMemoryIndex + 1) % loveMemories.length;
                updateMemoryPosition();
            });
            
            closeMemoriesBtn.addEventListener('click', function() {
                memoryCards.style.opacity = '0';
                memoryCards.style.pointerEvents = 'none';
            });
            
            // 添加键盘导航
            document.addEventListener('keydown', function(e) {
                if (memoryCards && memoryCards.style.opacity === '1') {
                    if (e.key === 'ArrowLeft') {
                        currentMemoryIndex = (currentMemoryIndex - 1 + loveMemories.length) % loveMemories.length;
                        updateMemoryPosition();
                    } else if (e.key === 'ArrowRight') {
                        currentMemoryIndex = (currentMemoryIndex + 1) % loveMemories.length;
                        updateMemoryPosition();
                    } else if (e.key === 'Escape') {
                        memoryCards.style.opacity = '0';
                        memoryCards.style.pointerEvents = 'none';
                    }
                }
            });
            
            // 卡片点击效果
            loveCard.addEventListener('click', function() {
                // 播放心跳声
                heartSound.play();
                
                // 创建心形粒子效果
                createHeartParticles(event.clientX, event.clientY);
            });
            
            // 不按钮的调皮效果
            noBtn.addEventListener('mouseover', function() {
                const btnRect = noBtn.getBoundingClientRect();
                const windowWidth = window.innerWidth;
                const windowHeight = window.innerHeight;
                
                // 随机生成一个新位置，但要确保按钮仍然可见
                let newX = Math.random() * (windowWidth - btnRect.width);
                let newY = Math.random() * (windowHeight - btnRect.height);
                
                // 应用新位置
                noBtn.style.position = 'fixed';
                noBtn.style.left = `${newX}px`;
                noBtn.style.top = `${newY}px`;
                
                // 添加微小的旋转效果
                noBtn.style.transform = `rotate(${Math.random() * 6 - 3}deg)`;
            });
            
            // 当拒绝按钮点击时，显示有趣的提示
            noBtn.addEventListener('click', function() {
                // 更改按钮文本为有趣的提示
                const messages = [
                    '再想想嘛~',
                    '真的要拒绝吗？',
                    '我会伤心的...',
                    '别这样对我！',
                    '给我一次机会！',
                    '确定不考虑一下？',
                    '我会对你好的！'
                ];
                const randomMessage = messages[Math.floor(Math.random() * messages.length)];
                noBtn.textContent = randomMessage;
                
                // 添加震动效果
                noBtn.classList.add('shake-animation');
                
                // 播放心碎的音效提示
                const brokenHeartSound = new Audio();
                brokenHeartSound.volume = 0.3;
                try {
                    // 即使没有音效，也要继续执行震动动画
                    brokenHeartSound.play().catch(() => {});
                } catch (e) {
                    console.log('音效播放失败:', e);
                }
                
                // 创建小型的悲伤粒子效果
                const rect = noBtn.getBoundingClientRect();
                const centerX = rect.left + rect.width / 2;
                const centerY = rect.top + rect.height / 2;
                createSadParticles(centerX, centerY);
                
                // 移除震动类
                setTimeout(() => {
                    noBtn.classList.remove('shake-animation');
                    // 随机恢复为原来的文本或另一个提示
                    if (Math.random() > 0.5) {
                        noBtn.textContent = '不';
                    }
                }, 500);
            });
            
            // 创建悲伤粒子效果
            function createSadParticles(x, y) {
                try {
                    const particlesCount = 10;
                    for (let i = 0; i < particlesCount; i++) {
                        const particle = document.createElement('div');
                        particle.classList.add('particle');
                        
                        particle.innerHTML = '<i class="fa fa-heart-broken"></i>';
                        const icon = particle.querySelector('i');
                        
                        // 设置为灰色系
                        icon.style.color = `hsl(0, 0%, ${50 + Math.random() * 20}%)`;
                        
                        particle.style.cssText = `position: fixed; left: ${x}px; top: ${y}px; font-size: ${Math.random() * 8 + 8}px; opacity: 0; transform: scale(0); z-index: 9999;`;
                        document.body.appendChild(particle);
                        
                        setTimeout(() => {
                            const angle = Math.random() * Math.PI * 2;
                            const distance = Math.random() * 60 + 30;
                            const finalX = x + Math.cos(angle) * distance;
                            const finalY = y + Math.sin(angle) * distance;
                            
                            particle.style.transition = `all 0.8s ease-out`;
                            particle.style.opacity = '1';
                            particle.style.transform = `translate(${finalX - x}px, ${finalY - y}px) scale(1) rotate(${Math.random() * 360}deg)`;
                            
                            setTimeout(() => {
                                particle.style.transition = `all 0.6s ease-in`;
                                particle.style.opacity = '0';
                                particle.style.transform = `translate(${finalX - x}px, ${finalY - y}px) scale(0)`;
                                
                                setTimeout(() => {
                                    try {
                                        if (document.body.contains(particle)) {
                                            document.body.removeChild(particle);
                                        }
                                    } catch (err) {
                                        console.error('移除悲伤粒子时出错:', err);
                                    }
                                }, 600);
                            }, 500);
                        }, 10);
                    }
                } catch (err) {
                    console.error('创建悲伤粒子效果时出错:', err);
                }
            }
            
            // 是按钮点击事件
            yesBtn.addEventListener('click', function() {
                // 播放心跳声
                heartSound.play();
                
                // 创建爱心雨
                createHeartsRain();
                
                // 显示结局弹窗
                setTimeout(() => {
                    endingModal.classList.remove('opacity-0');
                    endingModal.classList.remove('pointer-events-none');
                    endingModal.querySelector('div').classList.remove('scale-95');
                    endingModal.querySelector('div').classList.add('scale-100');
                }, 1000);
            });
            
            // 移除重启按钮的功能，同意后不再提供重新开始选项
            
            // 配置对象
            let config = {};
            
            // 加载配置的函数
            function loadConfig() {
                return new Promise((resolve) => {
                    // 默认配置
                    const defaultConfig = {
                        music: {
                            volume: 0.5,
                            loop: true,
                            sources: []
                        }
                    };
                    
                    try {
                        // 尝试从config.json加载配置
                        fetch('config.json')
                            .then(response => {
                                if (!response.ok) throw new Error('配置文件加载失败');
                                return response.json();
                            })
                            .then(data => {
                                console.log('成功加载配置文件');
                                config = { ...defaultConfig, ...data };
                                resolve(config);
                            })
                            .catch(error => {
                                console.warn('无法从config.json加载配置，使用默认值:', error);
                                config = defaultConfig;
                                resolve(config);
                            });
                    } catch (e) {
                        console.warn('加载配置时出错，使用默认值:', e);
                        config = defaultConfig;
                        resolve(config);
                    }
                });
            }
            
            // 预先加载配置
            loadConfig().then(() => {
                // 配置加载完成后初始化音乐
                initMusic();
            });
            
            // 获取音乐文件
            function getMusicFiles() {
                return new Promise((resolve) => {
                    try {
                        // 首先检查config.json中是否有配置的音乐源
                        if (config && config.music && config.music.sources && config.music.sources.length > 0) {
                            const configMusicFiles = config.music.sources.map(source => ({
                                name: source.name || `音乐${config.music.sources.indexOf(source) + 1}`,
                                path: source.src,
                                type: source.type || 'audio/mpeg'
                            }));
                            console.log('从配置文件加载音乐列表');
                            resolve(configMusicFiles);
                            return;
                        }
                        
                        // 否则使用本地文件
                        const actualMusicFiles = [
                            {
                                name: "杨紫、鱿小鱼 - 牛奶面包.flac",
                                path: "music/杨紫、鱿小鱼 - 牛奶面包.flac",
                                type: "audio/flac"
                            }
                        ];
                        
                        // 检查是否在Netlify环境中
                        const isNetlify = window.location.hostname.includes('netlify.app');
                        if (isNetlify) {
                            console.log('在Netlify环境中，使用相对路径');
                        }
                        
                        resolve(actualMusicFiles);
                    } catch (error) {
                        console.error('获取音乐文件时出错:', error);
                        // 返回空数组，让页面能继续运行
                        resolve([]);
                    }
                });
            }
            
            // 设置音乐源
            function setupMusicFromFiles(files) {
                try {
                    musicFiles = files;
                    
                    // 设置循环属性
                    backgroundMusic.loop = config && config.music && config.music.loop !== undefined 
                        ? config.music.loop 
                        : true;
                    
                    // 设置音量
                    backgroundMusic.volume = config && config.music && config.music.volume !== undefined
                        ? config.music.volume
                        : 0.5;
                    
                    // 更新音乐列表显示
                    updateMusicListDisplay(files);
                    
                    if (files.length === 0) {
                        if (currentMusicInfo) {
                            currentMusicInfo.textContent = "当前播放: 未找到音乐文件";
                        }
                        return;
                    }
                    
                    // 清空现有音频源
                    backgroundMusic.innerHTML = '';
                    
                    // 添加音频源
                    files.forEach(file => {
                        const sourceEl = document.createElement('source');
                        sourceEl.src = file.path;
                        sourceEl.type = file.type || 'audio/mpeg';
                        backgroundMusic.appendChild(sourceEl);
                    });
                    
                    // 添加回退文本
                    const fallbackText = document.createTextNode("您的浏览器不支持音频元素。");
                    backgroundMusic.appendChild(fallbackText);
                    
                    // 重置当前音乐索引
                    currentMusicIndex = 0;
                    
                    // 更新当前音乐信息
                    if (currentMusicInfo) {
                        currentMusicInfo.textContent = `当前播放: ${files[0].name}`;
                    }
                    
                    // 加载音频
                    backgroundMusic.load();
                    
                    // 不自动播放，等待用户交互
                    console.log('音乐已加载，等待用户交互后播放');
                } catch (error) {
                    console.error('设置音乐源时出错:', error);
                    if (currentMusicInfo) {
                        currentMusicInfo.textContent = "当前播放: 设置失败";
                    }
                }
            }
            
            // 更新音乐列表显示
            function updateMusicListDisplay(files) {
                if (!musicList) return;
                
                if (files.length === 0) {
                    musicList.innerHTML = "音乐列表: 未找到音频文件<br>请在music文件夹中添加音乐文件";
                    return;
                }
                
                let html = "音乐列表:<br>";
                files.forEach((file, index) => {
                    html += `${index + 1}. ${file.name}<br>`;
                });
                musicList.innerHTML = html;
            }
            
            // 初始加载音乐文件
            function initMusic() {
                try {
                    // 先加载配置，然后获取音乐文件
                    loadConfig().then(() => {
                        return getMusicFiles();
                    }).then(files => {
                        setupMusicFromFiles(files);
                    }).catch(error => {
                        console.error('初始化音乐失败:', error);
                        if (currentMusicInfo) {
                            currentMusicInfo.textContent = "当前播放: 加载失败";
                        }
                        if (musicList) {
                            musicList.textContent = "音乐列表: 加载失败";
                        }
                        // 使用默认音乐作为备选
                        const defaultMusic = [{name: '默认音乐', path: 'music/牛奶面包.flac', type: 'audio/flac'}];
                        try {
                            setupMusicFromFiles(defaultMusic);
                        } catch (fallbackError) {
                            console.error('加载默认音乐也失败:', fallbackError);
                        }
                    });
                } catch (err) {
                    console.error('初始化音乐系统时发生严重错误:', err);
                }
            }
            
            // 初始化音乐
            initMusic();
            
            // 刷新音乐列表按钮事件
            refreshConfigBtn.addEventListener('click', function() {
                if (currentMusicInfo) {
                    currentMusicInfo.textContent = '当前播放: 重新加载中...';
                }
                if (musicList) {
                    musicList.textContent = '音乐列表: 加载中...';
                }
                
                try {
                    getMusicFiles().then(files => {
                        const wasPlaying = isMusicPlaying;
                        setupMusicFromFiles(files);
                        
                        // 如果之前音乐正在播放，重新播放
                        if (wasPlaying && files && files.length > 0) {
                            backgroundMusic.play().then(() => {
                                console.log('音乐重新播放成功');
                            }).catch(e => {
                                console.log('重新播放失败:', e);
                            });
                        }
                    }).catch(error => {
                        console.error('刷新音乐列表失败:', error);
                        if (currentMusicInfo) {
                            currentMusicInfo.textContent = '当前播放: 刷新失败';
                        }
                        if (musicList) {
                            musicList.textContent = '音乐列表: 刷新失败';
                        }
                    });
                } catch (err) {
                    console.error('处理刷新请求时出错:', err);
                    if (currentMusicInfo) {
                        currentMusicInfo.textContent = '当前播放: 刷新失败';
                    }
                    if (musicList) {
                        musicList.textContent = '音乐列表: 刷新失败';
                    }
                }
            });
            
            // 音乐自定义面板显示/隐藏
            customizeMusicBtn.addEventListener('click', function() {
                musicCustomizationPanel.classList.toggle('hidden');
            });
            
            // 点击页面其他地方关闭自定义面板
            document.addEventListener('click', function(event) {
                if (!customizeMusicBtn.contains(event.target) && 
                    !musicCustomizationPanel.contains(event.target)) {
                    musicCustomizationPanel.classList.add('hidden');
                }
            });
            
            // 简化音频控制逻辑
            toggleMusicBtn.addEventListener('click', function() {
                if (isMusicPlaying) {
                    backgroundMusic.pause();
                    toggleMusicBtn.innerHTML = '<i class="fa fa-volume-off"></i>';
                    isMusicPlaying = false;
                } else {
                    // 尝试播放音乐
                    backgroundMusic.play().then(() => {
                        toggleMusicBtn.innerHTML = '<i class="fa fa-volume-up"></i>';
                        isMusicPlaying = true;
                    }).catch(e => {
                        console.log('手动播放失败:', e);
                        toggleMusicBtn.innerHTML = '<i class="fa fa-volume-off"></i>';
                        isMusicPlaying = false;
                    });
                }
            });
            
            // 监听音乐播放状态
            backgroundMusic.addEventListener('play', function() {
                isMusicPlaying = true;
                toggleMusicBtn.innerHTML = '<i class="fa fa-volume-up"></i>';
            });
            
            backgroundMusic.addEventListener('pause', function() {
                isMusicPlaying = false;
                toggleMusicBtn.innerHTML = '<i class="fa fa-volume-off"></i>';
            });
            
            // 监听音频加载错误
            backgroundMusic.addEventListener('error', function(e) {
                console.error('音频加载错误:', e);
                if (currentMusicInfo) {
                    currentMusicInfo.textContent = '当前播放: 加载失败';
                }
                
                // 尝试加载下一个音频源
                try {
                    if (musicFiles && musicFiles.length > 0) {
                        currentMusicIndex = (currentMusicIndex + 1) % musicFiles.length;
                        console.log(`尝试加载下一个音频源: ${currentMusicIndex + 1}`);
                        
                        // 清空并添加新的音频源
                        backgroundMusic.innerHTML = '';
                        
                        const sourceEl = document.createElement('source');
                        sourceEl.src = musicFiles[currentMusicIndex].path;
                        sourceEl.type = musicFiles[currentMusicIndex].type || 'audio/mpeg';
                        backgroundMusic.appendChild(sourceEl);
                        
                        // 添加回退文本
                        const fallbackText = document.createTextNode("您的浏览器不支持音频元素。");
                        backgroundMusic.appendChild(fallbackText);
                        
                        // 更新音乐信息
                        if (currentMusicInfo) {
                            currentMusicInfo.textContent = `当前播放: ${musicFiles[currentMusicIndex].name}`;
                        }
                        
                        // 重新加载但不自动播放，等待用户交互
                        backgroundMusic.load();
                    }
                } catch (err) {
                    console.error('处理音频错误时发生异常:', err);
                    if (currentMusicInfo) {
                        currentMusicInfo.textContent = '当前播放: 无法切换源';
                    }
                }
            });
            
            // 创建心形粒子效果
            function createHeartParticles(x, y) {
                try {
                    // 限制粒子数量，避免性能问题
                    const particlesToCreate = Math.min(15, 15);
                    for (let i = 0; i < particlesToCreate; i++) {
                        // 使用文档片段暂存DOM操作
                        const fragment = document.createDocumentFragment();
                        const heart = document.createElement('div');
                        heart.classList.add('particle');
                        
                        // 优化样式设置
                        heart.innerHTML = '<i class="fa fa-heart"></i>';
                        const icon = heart.querySelector('i');
                        
                        // 随机颜色
                        const hue = 340 + Math.random() * 40; // 红色到粉色范围
                        icon.style.color = `hsl(${hue}, 90%, 60%)`;
                        
                        // 设置位置和动画属性
                        heart.style.cssText = `position: fixed; left: ${x}px; top: ${y}px; font-size: ${Math.random() * 10 + 10}px; opacity: 0; transform: scale(0); z-index: 9999;`;
                        
                        fragment.appendChild(heart);
                        document.body.appendChild(fragment);
                        
                        // 添加动画
                        setTimeout(() => {
                            const angle = Math.random() * Math.PI * 2;
                            const distance = Math.random() * 80 + 40;
                            const finalX = x + Math.cos(angle) * distance;
                            const finalY = y + Math.sin(angle) * distance;
                            
                            heart.style.transition = `all 1s ease-out`;
                            heart.style.opacity = '1';
                            heart.style.transform = `translate(${finalX - x}px, ${finalY - y}px) scale(1)`;
                            
                            // 淡出动画
                            setTimeout(() => {
                                heart.style.transition = `all 0.5s ease-in`;
                                heart.style.opacity = '0';
                                heart.style.transform = `translate(${finalX - x}px, ${finalY - y}px) scale(0)`;
                                
                                // 移除元素 - 添加DOM存在性检查
                                setTimeout(() => {
                                    try {
                                        if (document.body.contains(heart)) {
                                            document.body.removeChild(heart);
                                        }
                                    } catch (err) {
                                        console.error('移除粒子时出错:', err);
                                    }
                                }, 500);
                            }, 800);
                        }, 10);
                    }
                } catch (err) {
                    console.error('创建心形粒子效果时出错:', err);
                }
            }
            
            // 创建爱心雨效果
            function createHeartsRain() {
                try {
                    if (!heartsRain) return;
                    
                    // 限制爱心数量，避免性能问题
                    const maxHearts = Math.min(100, 100);
                    // 避免过多的setTimeout调用，使用requestAnimationFrame
                    let createdHearts = 0;
                    const createNextHeart = () => {
                        if (createdHearts >= maxHearts) return;
                        
                        const heart = document.createElement('div');
                        heart.classList.add('particle');
                        
                        // 优化样式设置
                        heart.innerHTML = '<i class="fa fa-heart"></i>';
                        const icon = heart.querySelector('i');
                        
                        // 随机颜色
                        const hue = 320 + Math.random() * 60; // 粉色到红色范围
                        icon.style.color = `hsl(${hue}, 100%, ${60 + Math.random() * 20}%)`;
                        
                        // 设置位置和初始样式
                        heart.style.cssText = `position: absolute; left: ${Math.random() * 100}vw; top: -50px; font-size: ${Math.random() * 15 + 10}px; opacity: ${Math.random() * 0.7 + 0.3}; z-index: 9999;`;
                        
                        heartsRain.appendChild(heart);
                        
                        // 下落动画
                        const duration = 3 + Math.random() * 5;
                        const delay = Math.random() * 2;
                        const drift = (Math.random() - 0.5) * 50;
                        
                        setTimeout(() => {
                            heart.style.transition = `all ${duration}s linear`;
                            heart.style.transform = `translateY(${window.innerHeight + 50}px) translateX(${drift}px) rotate(${Math.random() * 360}deg)`;
                            
                            // 移除元素
                            setTimeout(() => {
                                try {
                                    if (heartsRain && heartsRain.contains(heart)) {
                                        heartsRain.removeChild(heart);
                                    }
                                } catch (err) {
                                    console.error('移除爱心雨元素时出错:', err);
                                }
                            }, duration * 1000);
                        }, delay * 1000);
                        
                        createdHearts++;
                        // 继续创建下一个爱心
                        if (createdHearts < maxHearts) {
                            requestAnimationFrame(() => {
                                setTimeout(createNextHeart, 100);
                            });
                        }
                    };
                    
                    // 开始创建爱心
                    createNextHeart();
                } catch (err) {
                    console.error('创建爱心雨效果时出错:', err);
                }
            }
            
            // 移动端适配 - 触摸事件
            function setupTouchEvents() {
                if ('ontouchstart' in window && noBtn) {
                    // 移除可能存在的旧事件监听器，避免重复绑定
                    noBtn.removeEventListener('touchstart', handleTouchStart);
                    
                    function handleTouchStart(e) {
                        try {
                            e.preventDefault();
                            const btnRect = noBtn.getBoundingClientRect();
                            const windowWidth = window.innerWidth;
                            const windowHeight = window.innerHeight;
                            
                            // 确保按钮宽度和高度有效
                            if (btnRect.width <= 0 || btnRect.height <= 0) return;
                            
                            // 随机生成一个新位置，确保按钮完全在视口内
                            let newX = Math.max(0, Math.min(Math.random() * (windowWidth - btnRect.width), windowWidth - btnRect.width));
                            let newY = Math.max(0, Math.min(Math.random() * (windowHeight - btnRect.height), windowHeight - btnRect.height));
                            
                            // 应用新位置
                            noBtn.style.position = 'fixed';
                            noBtn.style.left = `${newX}px`;
                            noBtn.style.top = `${newY}px`;
                        } catch (err) {
                            console.error('处理触摸事件时出错:', err);
                        }
                    }
                    
                    noBtn.addEventListener('touchstart', handleTouchStart, { passive: false });
                }
            }
            
            // 设置触摸事件
            setupTouchEvents();
            
            // 添加页面滚动效果
            window.addEventListener('scroll', function() {
                const scrollY = window.scrollY;
                mainContent.style.transform = `translateY(${scrollY * 0.2}px)`;
            });
            // 浮动爱心和表白语句功能
            function initFloatingElements() {
                try {
                    // 表白语句数组
                    const loveMessages = [
                        '我喜欢你',
                        '你是我的唯一',
                        '遇见你是最美丽的意外',
                        '想和你一起看星星',
                        '愿得一人心，白首不相离',
                        'You are my everything',
                        '爱你一万年',
                        '每一天都想见到你',
                        '你让我心跳加速',
                        '我想和你有个未来'
                    ];
                    
                    // 随机生成浮动元素
                    function createFloatingElement() {
                        // 随机决定是爱心还是文字
                        const isHeart = Math.random() > 0.3; // 70%概率是爱心
                        const element = document.createElement('div');
                        
                        if (isHeart) {
                            element.innerHTML = '<i class="fa fa-heart"></i>';
                            element.classList.add('floating-heart');
                            
                            // 随机颜色
                            const colors = ['#ff4d79', '#ff6b95', '#ff80ab', '#ff9ff3', '#a29bfe'];
                            const randomColor = colors[Math.floor(Math.random() * colors.length)];
                            element.querySelector('i').style.color = randomColor;
                            
                            // 随机大小
                            const size = Math.random() * 20 + 10;
                            element.style.fontSize = `${size}px`;
                        } else {
                            element.textContent = loveMessages[Math.floor(Math.random() * loveMessages.length)];
                            element.classList.add('floating-message');
                        }
                        
                        // 随机位置（屏幕边缘进入）
                        const side = Math.floor(Math.random() * 4); // 0: 上, 1: 右, 2: 下, 3: 左
                        let left, top;
                        
                        switch (side) {
                            case 0: // 顶部
                                left = Math.random() * 100;
                                top = -10;
                                break;
                            case 1: // 右侧
                                left = 110;
                                top = Math.random() * 100;
                                break;
                            case 2: // 底部
                                left = Math.random() * 100;
                                top = 110;
                                break;
                            case 3: // 左侧
                                left = -10;
                                top = Math.random() * 100;
                                break;
                        }
                        
                        element.style.cssText += `
                            position: fixed;
                            left: ${left}%;
                            top: ${top}%;
                            opacity: 0;
                            z-index: 15;
                            pointer-events: none;
                            user-select: none;
                        `;
                        
                        document.body.appendChild(element);
                        
                        // 动画
                        setTimeout(() => {
                            const duration = Math.random() * 10 + 10;
                            const targetLeft = Math.random() * 80 + 10;
                            const targetTop = Math.random() * 80 + 10;
                            
                            element.style.transition = `all ${duration}s linear`;
                            element.style.left = `${targetLeft}%`;
                            element.style.top = `${targetTop}%`;
                            element.style.opacity = '1';
                            
                            // 到达终点后淡出
                            setTimeout(() => {
                                element.style.transition = 'opacity 2s ease-out';
                                element.style.opacity = '0';
                                
                                // 移除元素
                                setTimeout(() => {
                                    if (document.body.contains(element)) {
                                        document.body.removeChild(element);
                                    }
                                }, 2000);
                            }, duration * 1000);
                        }, 10);
                    }
                    
                    // 定期创建浮动元素
                    const interval = setInterval(createFloatingElement, 3000);
                    
                    // 初始创建几个元素
                    for (let i = 0; i < 3; i++) {
                        setTimeout(createFloatingElement, i * 1000);
                    }
                    
                    return interval; // 返回interval ID以便需要时清除
                } catch (err) {
                    console.error('初始化浮动元素时出错:', err);
                }
            }
            
            // 爱情测试界面逻辑
            function initLoveTest(callback) {
                const testContainer = document.getElementById('loveTestContainer');
                const testResult = document.getElementById('loveTestResult');
                const continueBtn = document.getElementById('loveTestContinue');
                const questionsList = document.getElementById('loveTestQuestions');
                
                if (!testContainer || !testResult || !continueBtn || !questionsList) {
                    callback?.();
                    return;
                }
                
                // 爱情测试问题
                const questions = [
                    {
                        question: '你觉得你们的相遇是命中注定的吗？',
                        options: ['肯定是！', '也许是吧', '不太确定', '应该不是']
                    },
                    {
                        question: '对方的什么特质最吸引你？',
                        options: ['善良的内心', '迷人的笑容', '聪明的头脑', '坚定的性格']
                    },
                    {
                        question: '你愿意和对方一起经历人生的风风雨雨吗？',
                        options: ['当然愿意！', '应该可以', '要看情况', '不确定']
                    },
                    {
                        question: '你相信爱情可以战胜一切困难吗？',
                        options: ['完全相信', '基本相信', '半信半疑', '不太相信']
                    },
                    {
                        question: '和对方在一起时，你感到最幸福的瞬间是？',
                        options: ['相互理解的时候', '一起大笑的时候', '安静相处的时候', '共同完成某件事的时候']
                    },
                    {
                        question: '你愿意为对方做出多大的改变？',
                        options: ['任何改变都愿意', '合理的改变可以接受', '只能做小改变', '不想改变太多']
                    },
                    {
                        question: '你认为你们之间的默契程度如何？',
                        options: ['心有灵犀', '相当不错', '一般般', '还需要培养']
                    },
                    {
                        question: '你想象过和对方的未来吗？',
                        options: ['经常想象', '偶尔会想', '很少想', '几乎没想过']
                    },
                    {
                        question: '当对方遇到困难时，你会？',
                        options: ['全力以赴帮助', '尽量提供支持', '给予鼓励', '尊重对方自己解决']
                    },
                    {
                        question: '你觉得你们的性格互补吗？',
                        options: ['非常互补', '挺互补的', '一般', '可能有些冲突']
                    }
                ];
                
                let currentQuestion = 0;
                let score = 0;
                
                // 显示当前问题
                function displayQuestion() {
                    if (currentQuestion >= questions.length) {
                        showFinalResult();
                        return;
                    }
                    
                    const q = questions[currentQuestion];
                    questionsList.innerHTML = '';
                    
                    // 添加问题标题
                    const questionTitle = document.createElement('h3');
                    questionTitle.textContent = q.question;
                    questionTitle.classList.add('fade-in-text');
                    questionTitle.style.animationDelay = '0.2s';
                    questionsList.appendChild(questionTitle);
                    
                    // 添加选项按钮
                    q.options.forEach((option, index) => {
                        const optionBtn = document.createElement('button');
                        optionBtn.textContent = option;
                        optionBtn.classList.add('option-btn', 'fade-in-text');
                        optionBtn.style.animationDelay = `${0.4 + index * 0.1}s`;
                        
                        // 为选项添加点击事件
                        optionBtn.addEventListener('click', () => {
                            // 根据选项计算得分 (选项越靠前得分越高)
                            const optionScore = 4 - index;
                            score += optionScore;
                            
                            // 添加选择动画
                            optionBtn.classList.add('selected');
                            
                            // 延迟显示下一题
                            setTimeout(() => {
                                currentQuestion++;
                                displayQuestion();
                            }, 800);
                        });
                        
                        questionsList.appendChild(optionBtn);
                    });
                }
                
                // 显示最终结果
                function showFinalResult() {
                    questionsList.style.display = 'none';
                    testResult.style.display = 'block';
                    continueBtn.style.display = 'block';
                    
                    // 根据得分确定结果
                    let resultText = '';
                    let percentage = Math.round((score / (questions.length * 4)) * 100);
                    
                    if (percentage >= 80) {
                        resultText = `你们的爱情契合度高达 ${percentage}%！\n看来这是一段命中注定的缘分~`;
                    } else if (percentage >= 60) {
                        resultText = `你们的爱情契合度为 ${percentage}%！\n很有发展潜力的一段感情~`;
                    } else if (percentage >= 40) {
                        resultText = `你们的爱情契合度是 ${percentage}%！\n可以继续深入了解彼此~`;
                    } else {
                        resultText = `你们的爱情契合度为 ${percentage}%！\n但感情需要时间培养，一切皆有可能~`;
                    }
                    
                    testResult.textContent = resultText;
                    testResult.classList.add('fade-in-text');
                    
                    // 创建庆祝粒子效果
                    createCelebrationParticles();
                }
                
                // 继续按钮事件
                continueBtn.addEventListener('click', function() {
                    loveTestScreen.style.opacity = '0';
                    loveTestScreen.style.pointerEvents = 'none';
                    callback?.();
                });
                
                // 创建庆祝粒子效果
                function createCelebrationParticles() {
                    try {
                        const container = loveTestScreen;
                        const particlesCount = 30;
                        
                        for (let i = 0; i < particlesCount; i++) {
                            const particle = document.createElement('div');
                            particle.classList.add('celebration-particle');
                            
                            // 随机爱心或星星图标
                            const icons = ['fa-heart', 'fa-star', 'fa-heart', 'fa-star', 'fa-heart'];
                            const randomIcon = icons[Math.floor(Math.random() * icons.length)];
                            particle.innerHTML = `<i class="fa ${randomIcon}"></i>`;
                            
                            // 随机颜色
                            const colors = ['#ff6b6b', '#feca57', '#48dbfb', '#1dd1a1', '#5f27cd'];
                            const randomColor = colors[Math.floor(Math.random() * colors.length)];
                            particle.querySelector('i').style.color = randomColor;
                            
                            // 随机位置和大小
                            particle.style.cssText = `
                                position: absolute;
                                left: ${Math.random() * 100}%;
                                top: ${Math.random() * 100}%;
                                font-size: ${Math.random() * 20 + 10}px;
                                opacity: 0;
                                transform: scale(0);
                                z-index: 10;
                            `;
                            
                            container.appendChild(particle);
                            
                            // 动画
                            setTimeout(() => {
                                const delay = Math.random() * 0.5;
                                particle.style.transition = `all 0.8s ease-out ${delay}s`;
                                particle.style.opacity = '1';
                                particle.style.transform = `scale(1) translateY(-${Math.random() * 30 + 20}px)`;
                                
                                setTimeout(() => {
                                    particle.style.transition = 'all 0.8s ease-in';
                                    particle.style.opacity = '0';
                                    particle.style.transform = `scale(0) translateY(-${Math.random() * 60 + 40}px)`;
                                }, 1000);
                            }, 10);
                        }
                    } catch (err) {
                        console.error('创建庆祝粒子时出错:', err);
                    }
                }
                
                // 开始测试
                displayQuestion();
            }
            
            // 添加震动动画样式
            const style = document.createElement('style');
            style.textContent = `
                @keyframes shake {
                    0%, 100% { transform: translateX(0) rotate(0deg); }
                    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px) rotate(-2deg); }
                    20%, 40%, 60%, 80% { transform: translateX(5px) rotate(2deg); }
                }
                
                .shake-animation {
                    animation: shake 0.5s ease-in-out !important;
                }
                
                /* 添加卡片悬停效果增强 */
                .love-card:hover {
                    transform: scale(1.03) rotate(1deg);
                    box-shadow: 0 20px 40px rgba(255, 77, 121, 0.4);
                    transition: all 0.3s ease-out;
                }
                
                /* 增强按钮交互效果 */
                .btn {
                    transition: all 0.3s ease;
                    position: relative;
                    overflow: hidden;
                }
                
                .btn::before {
                    content: '';
                    position: absolute;
                    top: 0;
                    left: -100%;
                    width: 100%;
                    height: 100%;
                    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
                    transition: left 0.5s ease;
                }
                
                .btn:hover::before {
                    left: 100%;
                }
                
                /* 增强文字渐入动画 */
                .fade-in-text {
                    animation: fadeInText 1.2s ease-out forwards;
                }
                
                @keyframes fadeInText {
                    from {
                        opacity: 0;
                        transform: translateY(30px);
                    }
                    to {
                        opacity: 1;
                        transform: translateY(0);
                    }
                }
                
                /* 爱情测试界面样式 */
                .love-test-container {
                    background: rgba(255, 255, 255, 0.95);
                    border-radius: 20px;
                    padding: 40px;
                    max-width: 600px;
                    width: 90%;
                    box-shadow: 0 20px 40px rgba(255, 77, 121, 0.2);
                    position: relative;
                    overflow: hidden;
                }
                
                .love-test-container::before {
                    content: '';
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    height: 5px;
                    background: linear-gradient(90deg, #ff4d79, #ffb800, #4d79ff);
                }
                
                .love-test-container h2 {
                    color: #333;
                    margin-bottom: 30px;
                    font-size: 28px;
                    text-align: center;
                }
                
                .questions-list {
                    margin-bottom: 30px;
                }
                
                .questions-list h3 {
                    color: #555;
                    margin-bottom: 20px;
                    font-size: 20px;
                    font-weight: normal;
                    line-height: 1.5;
                }
                
                .option-btn {
                    display: block;
                    width: 100%;
                    padding: 15px 20px;
                    margin-bottom: 15px;
                    border: none;
                    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
                    border-radius: 10px;
                    font-size: 16px;
                    color: #495057;
                    cursor: pointer;
                    transition: all 0.3s ease;
                    position: relative;
                    overflow: hidden;
                    opacity: 0;
                    transform: translateY(20px);
                }
                
                .option-btn:hover {
                    background: linear-gradient(135deg, #e9ecef, #dee2e6);
                    transform: translateY(-3px) !important;
                    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
                }
                
                .option-btn.selected {
                    background: linear-gradient(135deg, #ff4d79, #ff6b95) !important;
                    color: white !important;
                    transform: scale(0.98);
                }
                
                .test-result {
                    display: none;
                    font-size: 22px;
                    color: #333;
                    text-align: center;
                    line-height: 1.6;
                    padding: 20px;
                    margin-bottom: 30px;
                    background: rgba(255, 248, 235, 0.8);
                    border-radius: 10px;
                    white-space: pre-line;
                }
                
                .love-test-continue {
                    display: none;
                    margin: 0 auto;
                    background: linear-gradient(135deg, #ff4d79, #ff6b95);
                    color: white;
                    font-size: 18px;
                    padding: 15px 30px;
                    border: none;
                    border-radius: 30px;
                    cursor: pointer;
                    transition: all 0.3s ease;
                    box-shadow: 0 10px 20px rgba(255, 77, 121, 0.3);
                }
                
                .love-test-continue:hover {
                    transform: translateY(-3px);
                    box-shadow: 0 15px 30px rgba(255, 77, 121, 0.4);
                }
                
                .celebration-particle {
                    pointer-events: none;
                }
                
                /* 浮动爱心和表白语句样式 */
                .floating-heart i {
                    animation: floatHeart 3s ease-in-out infinite;
                    display: block;
                }
                
                @keyframes floatHeart {
                    0%, 100% {
                        transform: translateY(0) rotate(0deg);
                    }
                    25% {
                        transform: translateY(-5px) rotate(5deg);
                    }
                    75% {
                        transform: translateY(5px) rotate(-5deg);
                    }
                }
                
                .floating-message {
                    font-size: 14px;
                    padding: 5px 10px;
                    background: rgba(255, 255, 255, 0.9);
                    border-radius: 20px;
                    color: #ff4d79;
                    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
                    font-weight: bold;
                    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
                    animation: floatMessage 4s ease-in-out infinite;
                }
                
                @keyframes floatMessage {
                    0%, 100% {
                        transform: translateY(0) rotate(0deg);
                    }
                    33% {
                        transform: translateY(-3px) rotate(1deg);
                    }
                    66% {
                        transform: translateY(3px) rotate(-1deg);
                    }
                }
                
                /* 浮动元素响应式调整 */
                @media (max-width: 768px) {
                    .floating-message {
                        font-size: 12px;
                        padding: 4px 8px;
                    }
                    
                    .floating-heart i {
                        font-size: 16px !important;
                    }
                }
            `;
            document.head.appendChild(style);
        });
    </script>
</body>
</html>